<template>
    <div class="header">
        <img class="vp-back-img" src="../../assets/img/china/flower.png" alt="">
        <div class="c-header-container">
            <div class="h-title">
                <img src="../../assets/img/china/title.png" alt="">
            </div>
            <div class="c-black">
                2017济南第一届
            </div>
            <div class="c-header-text">
                <div>主办单位：市委宣传部、市文明办、市委高校工委、团市委、市教育局、市文化局、中国孔子基金会、中国实学研究会、市学联、市少工委 承</div>
                <div>承办单位：共青团山东省委    中共山东省委高校工委   山东省教育厅   山东省文化厅   曲阜师范大学</div>
            </div>
            <div class="c-header-form">
                <img src="../../assets/img/china/book_left.png" alt="">
                <div class="c-header-form-button">
                    <div>
                        <button class="vp-btn vp-btn-red" type="button">我要报名</button>
                    </div>
                    <div>
                        <router-link to="/home">已报名，开始答题</router-link>
                    </div>
                </div>
                <img src="../../assets/img/china/book_right.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'header'
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../plugins/assets/css/flex.less';

    .header{
        position: relative;
        width:100%;
    }
    .vp-back-img{
        position: absolute;
    }
    .c-header-container{
        margin: 0 auto;
        width:80%;
    }
    .h-title{
        padding: 50px;
        text-align: center;
    }
    .c-black{
        background: url("../../assets/img/china/black.png") 0 0 no-repeat;
        color: #fff;
        font-size: 24px;
        line-height: 50px;
        text-align: center;
        width:450px;
        height:50px;
        margin:30px auto;
    }
    .c-header-text{
        font-size:14px;
        font-weight:bold;
        width: 60%;
        margin:50px auto;
        div{
            margin-bottom: 20px;
        }
    }
    .c-header-form{
        overflow: hidden;
        .flex-auto;
        &-button{
            div{
                text-align: center;
            }
            :first-child{
                margin-bottom:20px;
            }
            button{
                width: 150px;
                height:50px;
                font-weight:bold;
                font-size:20px;
            }
            a{
                font-size:24px;
                color: #474646;
                font-weight:bold;
            }
        }
    }
</style>